<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>05-表格增删.html</title>
</head>
<script type="text/javascript">

    window.onload = ()=>{


        function deleteMyRow(obj) {
            let tr = obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr)

        }


        let usertable = document.getElementById("usertable");
        let addUser = document.getElementById("addUser");
        addUser.onclick = ()=>{
            let text_name = document.getElementById("name").value;
            let text_tel = document.getElementById("tel").value;
            let text_addr = document.getElementById("addr").value;
            usertable.innerHTML += `<tr>
                    <td>${text_name}</td>
                    <td>${text_tel}</td>
                    <td>${text_addr}</td>
                    <td><a href="#" onclick="deleteMyRow(this);">删除</a>
                    </td>
                    </tr>`;
        }

    }

</script>
<body>
<center>
    <br>
    <br> 添加用户:<br>
    <br> 姓名: <input type="text" name="name" id="name"/>&nbsp;&nbsp; 电话: <input type="text"
                                                                               name="tel" id="tel"/>&nbsp;&nbsp; 住址:
    <input type="text" name="addr" id="addr"/><br>
    <br>
    <button id="addUser">提交</button>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <table id="usertable" border="1" cellpadding="5" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>电话</th>
            <th>住址</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>110</td>
            <td>上海</td>
            <td><a href="#" onclick="deleteMyRow(this);">删除</a>
            </td>
        </tr>
    </table>
</center>
</body>
</html>
